﻿@model CQIE.OVS.Model.Activity

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/kj/layui/css/layui.css" rel="stylesheet" />
    <title>DetailActive</title>
    <style type="text/css">
        dt {
            font-size: 15px;
            color: #01AAED;
            margin-bottom: 15px;
        }
    </style>
</head>
<body style="width: 523px; margin-left: 100px; margin-top: 50px;">
    <div>
        @Html.HiddenFor(model=>model.ID)
        <dl class="dl-horizontal">
            <dt>
                <span class="layui-badge-dot layui-bg-blue"></span>&nbsp;@Html.DisplayNameFor(model => model.Title):
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Title)
            </dd>
            <hr />
            <dt>
                <span class="layui-badge-dot layui-bg-blue"></span>&nbsp;@Html.DisplayNameFor(model => model.DateStart):
            </dt>

            <dd>
                @Html.DisplayFor(model => model.DateStart)
            </dd>
            <hr />
            <dt>
                <span class="layui-badge-dot layui-bg-blue"></span>&nbsp;@Html.DisplayNameFor(model => model.DateEnd):
            </dt>

            <dd>
                @Html.DisplayFor(model => model.DateEnd)
            </dd>
            <hr />
            <dt>
                <span class="layui-badge-dot layui-bg-blue"></span>&nbsp;@Html.DisplayNameFor(model => model.Info):
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Info)
            </dd>
            <hr />
            <dt>
                <span class="layui-badge-dot layui-bg-blue"></span>&nbsp;选手信息:
            </dt>

        </dl>
    </div>
    <div style="width: 523px;">
        <table id="Camtable" lay-filter="Camtable">
        </table>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        </script>

    </div>

<script src="~/kj/layui/layui.js"></script>
<script>
    layui.use(['table', 'laypage','jquery'],function() {
        var table = layui.table;
        var laypage = layui.laypage;
        var $ = layui.jquery;

        table.render({
            elem: '#Camtable'
            , height: 300
            , url: '/Active/GetActiveCam' //数据接口
            , where: {Aid:$('#ID').val()}
            , page: true //开启分页
            , toolbar: false //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , id:'Id'
            , cols: [
                [//表头
                    { type: 'checkbox', align: 'center',width: 48 },
                    { align:'center', type: 'numbers', width: 40},
                    { field: 'Name', title: '名称', width: 86, align: 'center'},
                    { field: 'Info', title: '简介', width: 145, align: 'center' },
                    { field: 'Sex', title: '性别', width: 60, align: 'center' },
                    { field: 'Age', title: '年龄', width: 60, align: 'center' },
                    { title: '操作', width: 75, align: 'center', toolbar: '#barDemo' }
                ]
            ], parseData: function(res) { //res 即为原始返回的数据
                //console.log(res);
                return {
                    "code": res.status, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
        });

        table.on('tool(Camtable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.open({
                    type: 2
                    , title: '编辑'
                    , content: '/Cam/DetailCam?Id=' + data.Id
                    , area:['400px','480px']
                    , btn:['返回']
                    , btn1: function(index) {
                        layer.close(index);
                    }
                });
            }
        });
    })
</script>
</body>
</html>
